import React from "react";
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import {XYZ, TileImage} from 'ol/source';
import sourceVector from 'ol/source/Vector';
import layerVector from 'ol/layer/Vector';
import Tile from 'ol/layer/Tile';
import {format} from 'ol/format';
import GeoJSON  from 'ol/format/GeoJSON';
import {Circle as CircleStyle, Fill, Stroke, Style,Text} from 'ol/style';
export const addMapInteractive= (map:any,callback) => {
    try {
        let highlightStyleCache = {};
        let featureOverlay = new layerVector({
            source: new sourceVector(),
            map: map,
            style: function (feature, resolution) {
                let text = resolution < 5000 ? feature.get('name') : '';
                if (!highlightStyleCache[text]) {
                    highlightStyleCache[text] = new Style({
                        stroke: new  Stroke({
                            color: '#f00',
                            width: 1
                        }),
                        fill: new  Fill({
                            color: 'rgba(255,0,0,0.1)'
                        }),
                        text: new  Text({
                            font: '12px Calibri,sans-serif',
                            text: text,
                            fill: new  Fill({
                                color: '#000'
                            }),
                            stroke: new  Stroke({
                                color: '#f00',
                                width: 3
                            })
                        })
                    });
                }
                return highlightStyleCache[text];
            }
        });
        let highlight;
        let displayFeatureInfo = function (pixel,callback) {
            let feature = map.forEachFeatureAtPixel(pixel, function (feature) {
                return feature;
            });
            if (callback) {
                callback(feature.values_.name)
            }
            let info = document.createElement("info");
            if (feature) {
                info.innerHTML = feature.getId() + ': ' + feature.get('name');
            } else {
                info.innerHTML = '&nbsp;';
            }

            if (feature !== highlight) {
                if (highlight) {
                    featureOverlay.getSource().removeFeature(highlight);
                }
                if (feature) {
                    featureOverlay.getSource().addFeature(feature);
                }
                highlight = feature;
            }

        };

        map.on('pointermove', function (evt) {
            if (evt.dragging) {
                return;
            }
            let pixel = map.getEventPixel(evt.originalEvent);
            displayFeatureInfo(pixel,null);
        });

        map.on('click',function (evt) {
            displayFeatureInfo(evt.pixel,callback);
        });

    } catch (e) {
    }
};

